﻿
<div>
    <button type="button" class="layui-btn layui-btn-sm" data-type="add"><i class="layui-icon">&#xe624;添加</i></button>
    <button type="button" class="layui-btn layui-btn-sm  layui-btn-danger" data-type="batchDel"><i class="layui-icon">&#xe640;删除</i></button>
</div>

<table id="datalist" lay-filter="datalist"></table>
@Html.AntiForgeryToken()
<script type="text/html" id="indexTpl">
    {{d.LAY_INDEX}}@*//此为自动序号下标从1开始，第二页从第一页的末尾递增。即如果每页10条，第二页第一条显示11*@
</script>
<!--操作模板-->
<script type="text/html" id="actionTpl">
    <button type="button" class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit" data-id="{{d.id}}">编辑</button>
    <button type="button" class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del" data-id="{{d.id}}">删除</button>
    <button type="button" class="layui-btn layui-btn-xs layui-btn-primary" lay-event="result" data-id="{{d.id}}">结果</button>
</script>
<!--解析器类型模板-->
<script type="text/html" id="analyzeTypeTpl">
    {{#  if(d.analyzeType==0){ }}
    <span style="color:#0094ff">默认</span>
    {{#  } else { }}
    <span style="color:#ff6a00">自定义</span>
    {{#  } }}
</script>
<!--状态模板-->
<script type="text/html" id="collectorStatusTpl">
    {{#  if(d.collectorStatus==1){ }}
    <span style="color:#0094ff">可用</span>
    {{#  } else { }}
    <span style="color:#ff6a00">不可用</span>
    {{#  } }}
</script>
<!--工作状态模板-->
<script type="text/html" id="workStatusTpl">
    {{#  if(d.workStatus==0){ }}

    <span style="color:#ff6a00">等待采集</span>
    {{#  } else if(d.workStatus==1){ }}

    <span style="color:#0094ff">采集中</span>
    {{#  } else if(d.workStatus==2){ }}

    <span style="color:#808080">停止</span>
    {{#  } }}
</script>

@section Scripts{
    <script>
        layui.use(['table','layer','form'], function () {
            var table = layui.table;
            var layer = layui.layer;
            var form = layui.form;
            var $ = layui.jquery
            //第一个实例
            table.render({
                elem: '#datalist'
                , height: 'full-40'
                , url: '@Url.Action("List","CollectInfoConfig")' //数据接口
                , page: true //开启分页
                , cols: [[ //表头
                    { type: 'checkbox', fixed: 'left' }
                    , { title: '序号', width: 60, toolbar: '#indexTpl'}
                    , { field: 'id', title: 'ID', width: 80}
                    , { field: 'name', title: '名称', width: 150}
                    , { field: 'startUrl', title: '起始url', width: 180 }
                    , { field: 'filterHost', title: '指定域', width: 180 }
                    , { field: 'encoding', title: '编码格式', width: 100 }
                    , { field: 'depth', title: '采集深度', width: 100 }
                    , { field: 'analyzeType', title: '解析器类型', width: 100 , templet:'#analyzeTypeTpl'}
                    , { field: 'pluginPath', title: '解析插件全称', width: 120 }
                    , { field: 'collectorStatus', title: '配置状态', width: 100 , templet:'#collectorStatusTpl'}
                    , { field: 'workStatus', title: '采集工作状态', width: 120, templet:'#workStatusTpl' }
                    , { field: 'latestCollectTime', title: '最近采集时间', width: 180 }
                    , { field: '', title: '操作', width:180 , fixed: 'right', toolbar:'#actionTpl'}
                ]]
            });


            //事件
            var active = {
                add: function () {
                    layer.open({
                        title:'新增',
                        type: 2,
                        area: ['50%', '70%'],
                        btn: ['提交','取消'],
                        btn1: function (index, layero) {
                            console.log(layero)
                            var iframeWindow = window['layui-layer-iframe'+ index]
                            ,submitID = 'submit'
                            ,submit = layero.find('iframe').contents().find('#'+ submitID);

                            //监听提交
                            iframeWindow.layui.form.on('submit('+ submitID +')', function(data){
                                console.log(data);
                                var field = data.field;//提交的字段
                                //提交数据到后台
                                $.post('@Url.Action("Create","CollectInfoConfig")', field, function (res) {
                                    if (res.code == 0) {
                                        table.reload('datalist'); //数据刷新
                                        layer.close(index); //关闭弹层
                                    }
                                    else {
                                        layer.alert(res.msg);
                                    }
                                });

                            });
                            submit.trigger('click');
                        },
                        content:'@Url.Action("Create","CollectInfoConfig")'
                    });
                },
                batchDel: function () {
                    var checkStatus = table.checkStatus('datalist')
                    ,checkData = checkStatus.data; //得到选中的数据

                    if(checkData.length === 0){
                      return layer.msg('请选择数据');
                    }
                    var id = [];
                    $.each(checkData, function () {
                        id.push(this.id);
                    })
                    layer.confirm('是否删除所选记录?', function(index){
                        //do something
                        //提交数据到后台
                        $.post('@Url.Action("Delete","CollectInfoConfig")', {id:id,__RequestVerificationToken:$('input[name="__RequestVerificationToken"]').val()}, function (res) {
                            if (res.code == 0) {
                                table.reload('datalist'); //数据刷新
                                layer.close(index); //关闭弹层
                            }
                            else {
                                layer.alert(res.msg);
                            }
                        });
                        layer.close(index);
                    });
                },
                del: function (obj) {
                    var data = obj.data; //获得当前行数据
                    layer.confirm('是否删除该条记录?', function(index){
                        //do something
                        //提交数据到后台
                        $.post('@Url.Action("Delete","CollectInfoConfig")', {id:data.id,__RequestVerificationToken:$('input[name="__RequestVerificationToken"]').val()}, function (res) {
                            if (res.code == 0) {
                                table.reload('datalist'); //数据刷新
                                layer.close(index); //关闭弹层
                            }
                            else {
                                layer.alert(res.msg);
                            }
                        });
                        layer.close(index);
                    });
                },
                edit: function (obj) {
                    var data = obj.data; //获得当前行数据
                    layer.open({
                        title:'编辑',
                        type: 2,
                        area: ['50%', '70%'],
                        content: '@Url.Action("Edit","CollectInfoConfig")?id=' + data.id,
                        btn: ['提交','取消'],
                        btn1: function (index, layero) {
                            console.log(layero)
                            var iframeWindow = window['layui-layer-iframe'+ index]
                            ,submitID = 'submit'
                            ,submit = layero.find('iframe').contents().find('#'+ submitID);

                            //监听提交
                            iframeWindow.layui.form.on('submit('+ submitID +')', function(data){
                                console.log(data);
                                var field = data.field;//提交的字段
                                //提交数据到后台
                                $.post('@Url.Action("Edit","CollectInfoConfig")?id=' + data.id, field, function (res) {
                                    if (res.code == 0) {
                                        table.reload('datalist'); //数据刷新
                                        layer.close(index); //关闭弹层
                                    }
                                    else {
                                        layer.alert(res.msg);
                                    }
                                });

                            });
                            submit.trigger('click');
                        }
                    });
                },
                result: function (obj) {
                    var data = obj.data; //获得当前行数据
                    layer.open({
                        title:'查看采集结果-'+data.name,
                        type: 2,
                        icon:0,
                        area: ['100%', '100%'],
                        content: '@Url.Action("Result","CollectInfoConfig")?configId='+data.id+'&analyzerFullName='+data.pluginPath
                    });
                }
            }
            //外部事件监听
            $('.layui-btn').on('click', function(){
              var type = $(this).data('type');
              active[type] ? active[type].call(this) : '';
            });

            //监听工具条事件监听
            table.on('tool(datalist)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

                if (layEvent === 'LAYTABLE_TIPS') {
                    layer.alert('Hi，头部工具栏扩展的右侧图标。');
                }
                else {
                    active[layEvent] ? active[layEvent].call(tr,obj) : '';
                }
            });

        });
    </script>
}
